<script setup>
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LabelLayout } from 'echarts/features';
import { ref,onMounted,onUnmounted } from 'vue'
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);//注册必须的组件和渲染器
const chartRef = ref(null)
const getMap = () => {//获取柱状图
  const myChart = echarts.init(chartRef.value,null,{
    renderer:'canvas',
    useDirtyRect:false
  });
  const option = {
    color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
        ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
       // 距离底部为0%
      bottom: 10,
      left: 'center',
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      //data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      // 修改图例组件的文字为 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "10"
      }
    },
    series: [
      {
        name: "年龄分布",
        type: "pie",
        // 设置饼形图在容器中的位置
        center: ["50%", "40%"],
        //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        // 不显示标签文字
        label: { 
          show: false,
          position: 'center'
         },
        // 不显示连接线
        labelLine: { show: false },
        data: [
          { value: 1, name: "0岁以下" },
          { value: 4, name: "20-29岁" },
          { value: 2, name: "30-39岁" },
          { value: 2, name: "40-49岁" },
          { value: 1, name: "50岁以上" }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}
onMounted(async()=>{
  await getMap()
})
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize); // 移除事件监听
    myChart.dispose(); // 销毁图表实例
    myChart = null; // 释放引用
  }
});
</script>
<template>
<div class="bartu" ref="chartRef">

</div>
</template>
<style scoped lang="less">
.bartu{
  height:240px;
}
</style>